<template>
  <div class="main_box">
    <CommonHeader title="审核人员选择"></CommonHeader>
    <van-form class="main_form" @submit="onSubmit">
      <div class="audit_box">
        <div class="audit_header">
          <span>审批流程</span>
          <span class="point">*</span>
        </div>
        <div class="select_item">
          <van-select
            v-model="form.audit1"
            label="主管领导"
            placeholder="请选择"
            :required="true"
            :rules="[{ required: true, message: ' ' }]"
            :options="oneList"
            input-align="right" />
        </div>
        <div class="select_item">
          <div class="van-select">
            <!-- 下拉框 -->
            <van-field
              readonly
              name="picker"
              :rules="[{ required: false, message: ' ' }]"
              :required="true"
              input-align="right"
              placeholder="请选择上级主管部门"
              :value="form.auditName2"
              label="上级主管部门"
              :right-icon="!audit2Show ? 'arrow-down' : 'arrow-up'"
              @click="onPicker2()" />
            <!-- :right-icon="!show?'arrow-down': 'arrow-up' " -->
            <!-- 下拉框组件 -->
            <van-popup v-model="audit2Show" round position="bottom" get-container="#app">
              <van-picker show-toolbar title="上级主管部门" value-key="label" :columns="columns2" @confirm="onConfirm2" @cancel="audit2Show = false" @change="onChangePicker2" />
            </van-popup>
          </div>
        </div>
        <!-- <div class="select_item">
          <van-select
            v-model="form.deptName"
            label="上级组织部门"
            placeholder="请选择"
            :required="true"
            :rules="[{ required: true, message: ' ' }]"
            :options="deptList"
            input-align="right"
          />
        </div> -->
        <div class="select_item">
          <div class="van-select">
            <!-- 下拉框 -->
            <van-field
              readonly
              name="picker"
              :rules="[{ required: false, message: ' ' }]"
              :required="true"
              input-align="right"
              placeholder="请选择上级组织部门"
              :value="form.auditName3"
              label="上级组织部门"
              :right-icon="!audit3Show ? 'arrow-down' : 'arrow-up'"
              @click="onPicker3()" />
            <!-- :right-icon="!show?'arrow-down': 'arrow-up' " -->
            <!-- 下拉框组件 -->
            <van-popup v-model="audit3Show" round position="bottom" get-container="#app">
              <van-picker show-toolbar title="上级组织部门" value-key="label" :columns="columns3" @confirm="onConfirm3" @cancel="audit3Show = false" @change="onChangePicker3" />
            </van-popup>
          </div>
        </div>
        <div class="select_item">
          <van-select v-model="form.send" label="抄送人" placeholder="请选择" :required="false" :options="personList" input-align="right" />
        </div>
      </div>
      <div class="btn_box">
        <van-button round type="info" native-type="submit">提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
export default {
  // eslint-disable-next-line
  name: 'AuditPerson',
  components: {
    CommonHeader,
  },
  data() {
    return {
      form: {
        audit1: '',
        audit2: '',
        auditName2: '',
        audit3: '',
        auditName3: '',
        // deptName: "",
        send: '',
      },
      audit2Show: false,
      audit3Show: false,
      personList: [],
      oneList: [],
      twoList: [],
      deptList: [],
      deptEmpList: [],
      deptEmpListColumns: [],
      columns2: [],
      columns3: [],
    };
  },
  watch: {
    // "form.deptName": function () {
    //   this.getDeptEmpList();
    // },
  },
  created() {
    this.getLeadList();
    this.getDeptList();
    this.getDeptEmpList();
    this.getEmpList();
  },
  mounted() {
    // 延迟加载
    setTimeout(() => {
      this.form = JSON.parse(sessionStorage.getItem('auditPerson')) || {};
    }, 200);
  },
  methods: {
    onChangePicker2(picker, values) {
      console.log(picker, values);
      const two = this.deptList
        .find((v) => v.deptName === values[0].value)
        .empList.map((v) => ({
          label: v.name,
          value: v.empId,
        }));
      picker.setColumnValues(1, two);
    },
    onChangePicker3(picker, values) {
      console.log(picker, values, '3');
      const two = this.deptEmpList
        .find((v) => v.deptName === values[0].value)
        .empList.map((v) => ({
          label: v.name,
          value: v.empId,
        }));
      picker.setColumnValues(1, two);
      // const dept = values[0].value;
    },
    onConfirm2(values) {
      console.log(values);
      this.form.audit2 = values[1].value;
      this.form.auditName2 = values[1].label;
      this.audit2Show = false;
    },
    onConfirm3(values) {
      console.log(values);
      this.form.audit3 = values[1].value;
      this.form.auditName3 = values[0].label + ' ' + values[1].label;
      this.audit3Show = false;
    },
    onPicker2() {
      this.audit2Show = true;
    },
    onPicker3() {
      this.audit3Show = true;
    },
    getLeadList() {
      this.$api.getLeadList({ empId: sessionStorage.getItem('employId') }).then((res) => {
        if (res.status === 200) {
          this.oneList = res.data.empList.map((v) => ({
            label: (v.positionName || '') + ' ' + v.name,
            value: v.empId,
          }));
        } else {
          this.oneList = [];
        }
      });
    },
    // getInfoDetail() {
    //   const params = {
    //     _gp: "quota",
    //     _mt: "empInfo",
    //     employId: sessionStorage.getItem("employId"),
    //     issueNo: "",
    //   };
    //   this.$api.commonApi(params).then((res) => {
    //     if (res.errno === 200) {
    //       this.getEmpList(res.data.areaId);
    //     }
    //   });
    // },
    getDeptEmpList() {
      this.$api.declareDeptEmpList().then((res) => {
        if (res.status === 200) {
          this.deptEmpList = res.data[0].chidDept;
          console.log('三级', this.deptEmpList);
          if (this.deptEmpList.length) {
            const one = this.deptEmpList.map((v) => ({
              label: v.deptName,
              value: v.deptName,
            }));
            const two = this.deptEmpList
              .find((v) => v.deptName === this.deptEmpList[0].deptName)
              .empList.map((v) => ({
                label: v.name,
                value: v.empId,
              }));
            this.columns3 = [{ values: one }, { values: two }];
          }
        }
      });
    },
    getEmpList() {
      this.$api
        .empList({
          page: 1,
          limit: 9999,
        })
        .then((res) => {
          if (res.status === 200) {
            this.personList = res.data.items.map((v) => ({
              label: v.name,
              value: v.empId,
            }));
          }
        });
    },
    getDeptList() {
      this.$api.declareDeptList().then((res) => {
        if (res.status === 200) {
          this.deptList = res.data[0].chidDept;
          console.log('二级', this.deptList);
          if (this.deptList.length) {
            const one = this.deptList.map((v) => ({
              label: v.deptName,
              value: v.deptName,
            }));
            const two = this.deptList
              .find((v) => v.deptName === this.deptList[0].deptName)
              .empList.map((v) => ({
                label: (v.positionName || '') + ' ' + v.name,
                value: v.empId,
              }));
            this.columns2 = [{ values: one }, { values: two }];
          }
        }
      });
    },
    onSubmit() {
      sessionStorage.setItem('auditPerson', JSON.stringify(this.form));
      this.$router.go(-1);
    },
    changeDept({ picker, value }) {
      const deptName = value[0].name;
      const columnTwo = this.deptEmpList.find((v) => v.deptName === deptName).employeeDOList;
      picker.setColumnValues(1, columnTwo);
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.main_form {
  padding: 15px;
  box-sizing: border-box;
}
.audit_box {
  text-align: left;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
}
.audit_box .audit_header {
  border-left: 4px solid #4180f2;
  padding-left: 10px;
  font-size: 15px;
  color: #333;
  margin-bottom: 10px;
}
.audit_box .audit_header .point {
  color: #f60e36;
  margin-left: 5px;
}
.select_item {
  border-top: 1px solid #efefef;
}
.btn_box >>> .van-button {
  width: 90%;
  margin-top: 20px;
}
</style>